<template>
    <el-dialog
      title="新增工单"
      width="630px"
      :visible="isShow"
      @close="closeFn"
    >
      <el-form
        ref="addForm"
        :rules="rules"
        :model="addForm"
        label-width="120px"
      >
        <el-form-item label="设备编号:" prop="innerCode">
          <el-input
            style="width: 85%"
            v-model="addForm.innerCode"
            @input="getOperatorList"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="工单类型:" prop="productType">
          <el-select
            style="width: 85%"
            v-model="addForm.productType"
            placeholder="请选择"
          >
            <el-option
              v-if="type && type.length > 0"
              :label="type[1].typeName"
              :value="type[1].type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补货数量:">
          <i class="el-icon-document" @click="innerVisible = true"> 补货清单</i>
          <!-- 内层弹窗 -->
          <el-dialog
            width="630px"
            title="补货详情"
            :visible.sync="innerVisible"
            append-to-body
          >
            <el-table :data="importList" max-height="360" style="width: 100%">
              <el-table-column prop="channelCode" label="货道编号">
              </el-table-column>
              <el-table-column prop="sku.skuName" label="商品名称">
              </el-table-column>
              <el-table-column prop="currentCapacity" label="当前数量">
                <template v-slot="{ row }">
                  <span v-if="row.sku">{{ row.currentCapacity }}</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column label="还可添加">
                <template v-slot="{ row }"
                  ><span v-if="row.sku">
                    {{ row.importCount }}</span
                  ><span v-else>-</span></template
                >
              </el-table-column>
              <el-table-column label="补满数量" width="180">
                <template v-slot="{ row }">
                  <el-input-number
                    v-if="row.sku"
                    style="width: 160px"
                    v-model="row.importCount"
                    controls-position="right"
                    :step="1"
                    :min="0"
                    :max="row.maxCapacity - row.currentCapacity"
                  ></el-input-number>
                  <span v-else>货道暂无商品</span>
                </template>
              </el-table-column>
            </el-table>
            <el-row type="flex" justify="center" style="margin-top:20px">
              <el-col :span="10">
                <el-button
                  class="btn cancel"
                  @click="innerVisible = false"
                  style="margin-right: 20px"
                  >取消</el-button
                >
                <el-button
                  class="btn confirm"
                  type="primary"
                  @click="innerSubmit"
                  >确认</el-button
                >
              </el-col>
            </el-row>
          </el-dialog>
        </el-form-item>
        <el-form-item label="运营人员:" prop="userId">
          <el-select
            style="width: 85%"
            v-model="addForm.userId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="desc">
          <el-input
            style="width: 85%"
            type="textarea"
            :rows="4"
            placeholder="请输入备注（不超过40字）"
            maxlength="40"
            show-word-limit
            v-model="addForm.desc"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="10">
            <el-button
              class="btn cancel"
              @click="closeFn"
              style="margin-right: 20px"
              >取消</el-button
            >
            <el-button
              class="btn confirm"
              type="primary"
              @click="addSubmit"
              >确认</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
</template>

<script>
import {
  getTaskTypeApi,
  getOperatorListApi,
  getGoodsImportListApi,
  createTaskApi
} from "@/api/task";
import { EventBus } from "./event-bus";
export default {
  props: {
    isShow: Boolean,
  },
  data() {
    return {
      addForm: {
        assignorId:'',
        createType: 1,
        innerCode: "",
        userId: "",
        productType: "",
        desc: "",
        msg:'',
        details: [],
      },
      innerVisible: false,
      userList: [],
      type: [],
      importList: [],
      rules: {
        innerCode: [
          { required: true, message: "设备编号不得为空", trigger: "blur" },
        ],
        productType: [
          { required: true, message: "请选择工单类型", trigger: "change" },
        ],
        userId: [
          { required: true, message: "请选择运营人员", trigger: "change" },
        ],
        desc: [
          { required: true, message: "备注内容不得为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getTaskType();
  },
  mounted(){
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    })  
    console.log(this.msg);
  },
  beforeDestroy(){
    EventBus.$off('aMsg');
  },
  methods: {
    // 获取工单类型
    async getTaskType() {
      const res = await getTaskTypeApi();
      this.type = [...res];
    },
    // 获取运维人员
    getOperatorList() {
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        const res = await getOperatorListApi(this.addForm.innerCode);
        this.userList = res;
        const res1 = await getGoodsImportListApi(this.addForm.innerCode);
        this.importList = [...res1];
        this.importList.forEach(item => {
          this.$set(item,'importCount',item.maxCapacity - item.currentCapacity)
        })
      }, 500);
      if (!this.addForm.innerCode) {
        this.userList = [];
      }
    },
    // 关闭弹窗
    closeFn() {
      this.$emit("update:isShow", false);
      this.$refs.addForm.resetFields()
      this.addForm = {
        assignorId:'',
        createType: 1,
        innerCode: "",
        userId: "",
        productType: "",
        desc: "",
        details: [],
      }
    },
    // 内层提交
    innerSubmit(){
      this.addForm.details = []
      this.importList.forEach(item => {
       if(item.sku){
         this.addForm.details.push({
          channelCode:item.channelCode,
          expectCapacity:item.importCount,
          skuId:item.sku.skuId,
          skuImage:item.sku.skuImage,
          skuName:item.sku.skuName
        })
       }
      })
      this.innerVisible = false
    },
    // 提交
    addSubmit(){
      this.$refs.addForm.validate(async pass=>{
        if(pass){
          this.addForm.assignorId = this.addForm.userId
          const res = await createTaskApi({...this.addForm})
          this.$message.success('工单创建成功')
          this.closeFn()
          this.$emit('searchTask')
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.btn {
  width: 80px;
  height: 36px;
  border: none;
  padding: 0;
  line-height: 36px;
}
.cancel {
  background-color: #fbf4f0;
  color: #7e7570;
}
.confirm {
  background-color: #ff6d29;
  color: #fff;
}
.el-icon-document {
  color: #5f84ff;
  cursor: pointer;
}

</style>
